<template>
  <el-row
    class="field-row"
    v-bind="rowProps">
    <el-col
      v-for="item of fields"
      v-bind="{ ...colProps, ...item.colProps }"
      :key="item.name"
      class="field-col">
      <el-form-item
        :prop="item.name"
        :label="item.label"
        class="field-item"
        v-bind="item.itemProps">
        <slot
          :name="item.name"
          v-if="item.name">
          <el-input
            v-bind="item.inputProps"
            v-model="data[item.name]"
            :placeholder="item.placeholder || `请输入${item.label}`" />
        </slot>
        <div v-else></div>
      </el-form-item>
    </el-col>
    <slot v-bind="{ colProps }" />
  </el-row>
</template>

<script>
export default {
  name: 'FieldCols',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    fields: Array,
    rowProps: {
      type: Object,
    },
    colProps: {
      default() {
        return { xs: 24, sm: 12, md: 8 };
      },
      type: Object,
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.field-item) {
  .el-form-item__content > {
    .el-select,
    .el-select-v2,
    .el-date-editor {
      width: 100%;

      > .el-input__wrapper {
        display: flex;
      }
    }
  }
}
</style>
